<template>
	<view>
		<u-navbar class="slot-wrap" title="用户登录" :is-back="true" :background="navbgcolor" z-index="10" title-color="#fff">
			<view class="search-wrap" style="margin: 0 20rpx;flex: 1;">
				<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
			</view>
		</u-navbar>
		<view style="padding: 30rpx;">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="手机号码" prop="account" label-width="150">
					<u-input :border="border" placeholder="请输入手机号" v-model="model.account" type="number"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="登陆密码" prop="password" label-width="150">
					<u-input :border="border" placeholder="请输入登录密码" v-model="model.password" type="text"></u-input>
				</u-form-item>
			</u-form>
			<view class="" style="padding: 10px 0;">
				<view class="" style="float: left;margin-top: 2rpx;">
					暂无账号 <text style="padding-left: 10rpx;color: #18B566;" @click="this.$u.route({url:'/pages/center/relogin',})">去注册</text>
				</view>
				<view class="" style="float: right;font-size: 24rpx;">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox v-model="checked" label-size="24" size="30">记住密码</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<u-button @click="submit" style="position: fixed;bottom: 50rpx;width: calc(100% - 60rpx);left: 30rpx;" type="success">登录</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				model:uni.getdata('userpass')?uni.getdata('userpass'):{
					account:null,
					password:''
				},
				border:false,
				checked:uni.getdata('userpass'),
				labelPosition:'left',
				codeTips:'',
				errorType: ['message'],
				rules: {
					account: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['blur'],
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,15}$/,
							message: '需同时含有字母和数字，长度在6-15之间',
							trigger: ['blur'],
						}
					],
				},
			}
		},
		methods: {
			checkboxGroupChange(){
				console.log(this.checked)
			},
			codeChange(text) {
				this.codeTips = text;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// if(!this.model.agreement) return this.$u.toast('请勾选协议');
						this.Logins();
					} else {
						console.log('验证失败');
					}
				});
				
			},
			Logins(){
				uni.showLoading({
					title: '登陆中...',
					mask: true
				})
				uni.request({
				    url: 'http://43.132.175.66/api/user/login', //仅为示例，并非真实接口地址。
					method:'post',
				    data: this.model,
				    header: {
				    },
				    success: (res) => {
						uni.hideLoading();
				        console.log(res.data);
						if(res.data.code == 0){
							this.$refs.uToast.show({
								title: res.data.msg,
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'error', 
								// 如果不需要图标，请设置为false
								// icon: false
							})
							return
						};
						uni.removedata('userpass');
						if(this.checked){
							uni.savedata('userpass',this.model);
						};
						uni.savedata('userdata',res.data.data.userinfo,'5d');
						this.$refs.uToast.show({
							title: res.data.msg,
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
							type: 'success', 
							// 如果不需要图标，请设置为false
							// icon: false
						})
						setTimeout(()=>{
							uni.$u.route({
								type:'back'
							})
						},800)
				    }
				});
			
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			
		}
	}
</script>

<style>

</style>
